<template>
  <div class='not-single album'>
    <div class='album-box'>
      <div class='album-ul'>
        <template v-for='item in album'>
          <a class='album-item' :href='"/photos/"+item.id'>
            <div class='album-item-box'>
              <div class='album-item-header'>
                <img :src='item.albumCover' alt=''>
              </div>
              <h3 class='album-item-title'>
                {{ item.albumName }}
              </h3>
            </div>
          </a>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import api from '@/api/api'

export default defineComponent({
  name: 'PhotoAlbum',
  setup(){
    const reactiveData = reactive({
      album: [] as any
    })
    onMounted(()=>{
      getAlbum()
    })
    const getAlbum = () => {
      api.getAlbums().then(({ data }) =>{
        reactiveData.album=data.data
      })
    }
    return{
      ...toRefs(reactiveData)
    }
  }
})
</script>
